<template>
  <div>
    <validator name='v'  @valid="$emit('valid')"  @invalid="$emit('invalid')">
    <form class="form-horizontal">
      <div class="row">
        <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_user_name.required ? 'has-error' : '']">
          <label for="f_user_name" class="control-label">用户姓名</label>
          <input type="text"  v-model="baseinfo.base.f_user_name" v-validate:f_user_name='{required: true }' class="form-control" placeholder="用户姓名" v-next-el="phone">
        </div>

        <div class="col-sm-3 form-group form-input-group"   :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'has-error' : '']">
          <label for="f_user_phone" class="control-label">用户电话</label>
          <input type="text"  v-model="baseinfo.base.f_user_phone" v-validate:f_user_phone="{minlength: 11, maxlength: 11  }" class="form-control" placeholder="用户电话" v-el:phone v-next-el="area">
        </div>

        <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_area.required ? 'has-error' : '']">
          <label for="f_area" class="control-label">区</label>
          <input type="text" v-model="baseinfo.base.f_area" v-validate:f_area='{required: true }'
          class="form-control" placeholder="区" v-el:area v-next-el="street" @input="address()" readonly>
        </div>

        <div class="col-sm-3 form-group form-input-group" >
          <label for="f_slice_area" class="control-label">片区</label>
          <input type="text"  v-model="baseinfo.base.f_slice_area" class="form-control" placeholder="片区/管理站" v-el:slice v-next-el="street" readonly>
          <!-- <v-select :value.sync="baseinfo.base.f_slice_area" v-model="baseinfo.base.f_slice_area"
              :options='sliceArea' placeholder='片区/管理站' readonly close-on-select></v-select> -->
        </div>

      </div>

      <div class="row">

        <div class="col-sm-3 form-group form-input-group"  :class="[$v.f_street.required ? 'has-error' : '']">
          <label for="f_street" class="control-label">街道名称</label>
          <input type="text"  v-model="baseinfo.base.f_street" v-validate:f_street='{required: true }'
          class="form-control" placeholder="街道名称" v-el:street v-next-el="areaname" @input="address()" readonly>
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.f_residential_area.required ? 'has-error' : '']">
          <label for="f_residential_area" class="control-label">小区名称</label>
          <input type="text"  v-model="baseinfo.base.f_residential_area"
          v-validate:f_residential_area='{required: true }' class="form-control" placeholder="小区名称" @input="address()" v-el:areaname v-next-el="building" :disabled="!modify">
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.f_building.required ? 'has-error' : '']">
          <label for="f_building" class="control-label">楼号</label>
          <input type="text"  v-model="baseinfo.base.f_building" v-validate:f_building='{required: true }'
          class="form-control" placeholder="楼号" v-el:building v-next-el="unit" @input="address()">
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.f_unit.required ? 'has-error' : '']">
          <label for="f_unit" class="control-label">单元号</label>
          <input type="text" v-model="baseinfo.base.f_unit" v-validate:f_unit='{required: true }'
          class="form-control" placeholder="单元号" v-el:unit v-next-el="floor" @input="address()">
        </div>


      </div>
      <div class="row">

        <div class="col-sm-3 form-group form-input-group">
          <label for="f_floor" class="control-label">楼层</label>
          <input type="text"  v-model="baseinfo.base.f_floor"
          class="form-control" placeholder="楼层" v-el:floor v-next-el="room" @input="address()">
        </div>

        <div class="col-sm-3 form-group form-input-group" :class="[$v.f_room.required ? 'has-error' : '']">
          <label for="f_room" class="control-label">门牌号</label>
          <input type="text" v-model="baseinfo.base.f_room" v-validate:f_room='{required: true }'
          class="form-control" id="f_room" placeholder="门牌号" v-el:room v-next-el="address" @input="address()">
        </div>

        <div class="col-sm-6 form-group form-input-group">
          <label for="f_address" class="control-label">详细地址</label>
          <input type="text" v-model="address" class="form-control" id="f_address" readonly placeholder="详细地址" v-el:address v-next-el="idnumber">
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_contract" class="control-label">合同编号</label>
          <input type="text"  v-model="baseinfo.base.f_contract_id" class="form-control" placeholder="合同编号">
        </div>
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_credentials" class="control-label">证件类型</label>
          <v-select :value.sync="baseinfo.base.f_credentials"
              :options='credentials' placeholder='证件类型'
              close-on-select></v-select>
        </div>
      <!-- </div>

      <div class="row"> -->
      <!-- 不是身份证暂时取消验证，保留，防止以后又改 -->
      <!-- <div class="col-sm-6 form-group form-input-group" :class="[$v.f_idnumber2.required ? 'has-error' : '']" v-if="baseinfo.base.f_credentials[0] !== '身份证'">
          <label for="f_idnumber" class="control-label">证件号码</label>
          <input type="text"  v-model="baseinfo.base.f_idnumber" v-validate:f_idnumber2='{required: true}' class="form-control" placeholder="证件号码" v-el:idnumber>
      </div> -->
      <div class="col-sm-6 form-group form-input-group"> <!--v-if="baseinfo.base.f_credentials[0] !== '身份证'"-->
          <label for="f_idnumber" class="control-label">证件号码</label>
          <input type="text"  v-model="baseinfo.base.f_idnumber" class="form-control" placeholder="证件号码" v-el:idnumber>
      </div>


      </div>
      <div class="row">
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_username" class="control-label">缴费类型</label>
            <v-select :value.sync="baseinfo.base.f_cost_type"
                v-model="baseinfo.base.f_cost_type"
                :options='costtypes' placeholder='缴费类型'
                close-on-select></v-select>
        </div>
        <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-用户类型'>
          <label for="f_username" class="control-label">用户类型</label>
          <v-select :value.sync="baseinfo.base.f_user_type"
              :options='usertypes' placeholder='用户类型'
              close-on-select :disabled="!modify"></v-select>
        </div>

        <div class="col-sm-3 form-group form-input-group" id='userfiles-useEssInf-用气性质'>
          <label for="f_username" class="control-label">用气性质</label>
          <v-select :value.sync="baseinfo.base.f_gasproperties" v-model="baseinfo.base.f_gasproperties"
              :options='gasproperties' placeholder='用气性质'
              close-on-select></v-select>
        </div>
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_username" class="control-label">用户状态</label>
          <v-select :value.sync="baseinfo.base.f_user_state" v-model="baseinfo.base.f_user_state"
              :options='userstates' placeholder='用户状态' close-on-select disabled="true"></v-select>
        </div>
      </div>
      <div class="row">
	      <div class=" col-sm-6 form-group form-input-group" :class="[$v.adjustable.required ? 'select-error' : '']">
	        <label for="f_adjustable" class="col-sm-2 control-label">调压箱</label>
          <div class="col-sm-4">
            <input type="text" v-show="false" v-model="$refs.adjustable.selectedItems" v-validate:adjustable='{required: true }'>
	          <v-select :value.sync="baseinfo.base.f_adjustable" :options='adjustables' placeholder='调压箱' close-on-select
	            v-model='baseinfo.base.f_adjustable' :search='true' v-ref:adjustable></v-select>
          </div>
	      </div>
        <div class="col-sm-3 form-group form-input-group" :class="[$v.f_people_num.required ? 'has-error' : '']">
          <label for="f_people_num" class="control-label">人口数</label>
          <input type="number"  v-model="baseinfo.base.f_people_num" v-validate:f_people_num='{required: true }' class="form-control" placeholder="家庭人口数" >
        </div>
        <div class="col-sm-3 form-group form-input-group">
          <label for="f_rent_phone" class="control-label">租户电话</label>
          <input type="text"  v-model="baseinfo.base.f_rent_phone" class="form-control" placeholder="租户电话">
        <div>
      </div>


      <ul class="nav nav-tabs" style="margin-bottom: 10px;" v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
          <li role="presentation" class="active"><a href="#">银行信息</a></li>
      </ul>

      <div v-if="baseinfo.base.f_cost_type[0] === '银行代扣'">
        <div class="row" >
          <div class="col-sm-3 form-group form-input-group" :class="[$v.f_bank_accopen.required ? 'has-error' : '']">
            <label for="f_username" class="control-label">银行户名</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_accopen"
            class="form-control" id="f_username" placeholder="用户姓名" v-validate:f_bank_accopen='{required: true}'
            v-next-el="bankaccount">
          </div>

          <div class="col-sm-3 form-group form-input-group" id=userfiles-useEssInf-银行名称>
            <label for="f_username" class="control-label ">银行名称</label>
            <!-- <input type="text"  v-model="baseinfo.bank.f_bank_name" class="form-control" id="f_username" placeholder="银行名称" v-el:costtype v-next-el="bankaccount"> -->
            <v-select :value.sync="baseinfo.bank.f_bank_name"
                :options='banknames' placeholder='银行名称'
                close-on-select></v-select>
          </div>

          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_bank_account.required ? 'has-error' : '']">
            <label for="f_userid" class="control-label">银行账号</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_account" class="form-control"
             v-validate:f_bank_account='{required: true}'placeholder="银行账号" v-el:bankaccount v-next-el="bankidnumber">
          </div>
        </div>
        <div class="row" >
          <div class="col-sm-6 form-group form-input-group" :class="[$v.f_bank_idnumber.identityCardValid ? 'has-error' : '']">
            <label for="f_bank_idnumber" class="control-label">身份证号</label>
            <input type="text"  v-model="baseinfo.bank.f_bank_idnumber" v-validate:f_bank_idnumber='{identityCardValid: true}' class="form-control" aria-describedby="helpBlock" placeholder="身份证号" v-el:bankidnumber>
          </div>
          <span id="helpBlock" class="help-block">银行卡所属人身份证号</span>
        </div>
      </div>

    </form>
  </validator>
  </div>
</template>

<script>
import AppData from '../../stores/AppData'
import * as Util from '../Util'
import Vue from 'vue'

export default {
  title: '基本信息',
  props: ['baseinfo', 'modify'],
  methods: {
    onValid (res) {
      this.$dispatch('valid')
    },
    onInvalid (res) {
      this.$dispatch('invalid')
    },
    address () {
      console.log('地址信息，，，', this.baseinfo.base)
      let strAddress = `${this.baseinfo.base.f_area ? this.baseinfo.base.f_area
        +'-': ''}${this.baseinfo.base.f_street ? this.baseinfo.base.f_street
          +'-': ''}${this.baseinfo.base.f_residential_area ? this.baseinfo.base.f_residential_area
            +'': ''}${this.baseinfo.base.f_building ? this.baseinfo.base.f_building
              +'号楼': ''}${this.baseinfo.base.f_unit ? this.baseinfo.base.f_unit
                +'单元': ''}${this.baseinfo.base.f_floor ? this.baseinfo.base.f_floor
                  +'层': ''}${this.baseinfo.base.f_room ? this.baseinfo.base.f_room
                    + '室': ''}`
      console.log('strAddress...', strAddress)
      Vue.set(this.baseinfo.base, 'f_address', strAddress)
      // this.baseinfo.base.f_address = strAddress
    }
  },
  watch: {
    // 重置验证结果，当证件类型切换时，验证结果不能立即刷新，需要重置
    'baseinfo.base.f_credentials[0]' () {
      console.log('验证器重置')
      this.$resetValidation()
    },
    'baseinfo.base.f_cost_type[0]' () {
      console.log('验证器重置')
      this.$resetValidation()
    },
    // 当选择销户，需要给其提醒是否进行销户
    'baseinfo.base.f_user_state' (val) {
      if (val[0] === '销户') {
        this.$showMessage('是否要对该用户进行销户操作？', ['confirm', 'cancel']).then((res) => {
          if (res !== 'confirm') {
            this.baseinfo.base.f_user_state = ['正常']
          }
        })
      }
    }
  },
  computed: {
    usertypes () {
      return AppData.getParam('用户类型')
    },
    inputtores () {
      return AppData.getParam('抄表员')
    },
    credentials () {
      return AppData.getParam('证件类型')
    },
    costtypes () {
      return AppData.getParam('缴费类型')
    },
    gasproperties () {
      let rs = []
      if (this.baseinfo.base.f_user_type.length === 1) {
        rs = AppData.getParam(this.baseinfo.base.f_user_type[0])
      }
      return rs
    },
    banknames () {
      return AppData.getParam('银行名称')
    },
    userstates () {
      return AppData.getParam('用户状态')
    },
    adjustables () {
      let arr = []
      let filter = null
      if (Util.f.parent.orgtype !== '总公司') {
        filter = Util.f.f_fengongsi
      }
      AppData.getAdjustable(filter).forEach((item) => {
        let temp = {}
        temp.label = `[${item.value.f_adjustable_id}]-${item.label}`
        temp.value = item.value
        arr.push(temp)
      })
      return arr
      // return AppData.getAdjustable()
    },
    address () {
      let strAddress = `${this.baseinfo.base.f_area ? this.baseinfo.base.f_area
        +'-': ''}${this.baseinfo.base.f_street ? this.baseinfo.base.f_street
          +'-': ''}${this.baseinfo.base.f_residential_area ? this.baseinfo.base.f_residential_area
            +'': ''}${this.baseinfo.base.f_building ? this.baseinfo.base.f_building
              +'号楼': ''}${this.baseinfo.base.f_unit ? this.baseinfo.base.f_unit
                +'单元': ''}${this.baseinfo.base.f_floor ? this.baseinfo.base.f_floor
                  +'层': ''}${this.baseinfo.base.f_room ? this.baseinfo.base.f_room
                    + '室': ''}`
      this.baseinfo.base.f_address = strAddress
      return strAddress
    }
  }
}
</script>
